﻿<!DOCTYPE html>

<!-- BEGIN html -->
<html lang="en-US">
<!-- BEGIN head -->
<head>
<title>图片灰色滤镜效果_黑鸟志</title>
<style>
.post-media img
{
  filter: url("data:image/svg+xml;utf8,<svg xmlns=\'http://www.w3.org/2000/svg\'><filter id=\'grayscale\'><feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/></filter></svg>#grayscale");
	filter: gray;
	-webkit-filter: grayscale(100%);
	-webkit-transition: all .2s ease-in;
	-moz-transition: all .2s ease-in;
	-ms-transition: all .2s ease-in;
	-o-transition: all .2s ease-in;
	transition: all .2s ease-in;
}
.post-media img:hover
{
	filter: none;
	-webkit-filter: none;
}
</style>
</head>
<body>
<div class="post-media">
	<img src="http://heiniaozhi.cn/app/webroot/Uploads/images/design/X21/X21_slider.jpg" />
</div>
</body>
</html>